<template>
  <div>
    <el-row>
      <el-form
          inline
          label-position="left"
      >

        <!-- 上报人 -->
        <el-form-item
            label="上报人">
          <Select
              @SelectChange="monitorChange"
              :flushFlag="resettingFlag"
              :options="freqCategoryOptions"
          ></Select>
        </el-form-item>

        <!-- 上报设备 -->
        <el-form-item
            label="上报设备">
          <Select
              @SelectChange="mobileChange"
              :flushFlag="resettingFlag"
              :options="districtOptions"
          ></Select>
        </el-form-item>

        <!-- 开始时间 -->
        <el-form-item label="开始时间">
          <el-date-picker
              size="mini"
              style="width: 175px"
              v-model="startTime"
              type="datetime"
              placeholder="选择开始时间"
              default-time="12:00:00"
              @change="timeRangeChange(1)"
          >
          </el-date-picker>
        </el-form-item>

        <!-- 结束时间 -->
        <el-form-item label="结束时间">
          <el-date-picker
              size="mini"
              style="width: 175px"
              v-model="endTime"
              type="datetime"
              placeholder="选择结束时间"
              default-time="12:00:00"
              @change="timeRangeChange(2)"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item style="float: right">
          <el-button
              type="primary"
              size="mini"
              @click="selectSubmit"
          >查询
          </el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
// --------------- element-ui ---------------------
import Select from "../../../../../components/element-ui/elSelect"
// ------------- axios ---------------------

export default {
  components: {
    Select
  },
  data() {
    return {
      //  ----------- 查询表单 --------------
      resettingFlag: false, // 重置查询条件标识
      mobile: undefined,
      monitor: undefined,
      startTime: undefined,
      endTime: undefined,
      freq: undefined
    }
  },
  props: {
    Reset: {
      type: Boolean,
      default: false
    },
    districtOptions: {
      type: Array,
      default: () => {
        return []
      }
    },
    freqCategoryOptions: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  watch: {
    Reset: function () {
      this.resettingSelectOption()
    }
  },
  methods: {
    // ------------- axios ----------------
    // -------------- 查询功能 --------------

    /**
     * 重置查询条件
     * */
    resettingSelectOption: function () {
      this.mobile = undefined;
      this.monitor = undefined;
      this.startTime = undefined;
      this.endTime = undefined;
      this.resettingFlag = !this.resettingFlag;
      this.$emit("resetSelectForm");
    },

    /**
     * 上报设备
     * @param val
     */
    mobileChange: function (val) {
      this.mobile = val;
    },

    /**
     * 上报人
     * @param val
     */
    monitorChange: function (val) {
      this.monitor = val;
    },

    /**
     * 提交检索条件
     */
    selectSubmit: function () {
      // if (this.district === 0) {
      //   this.$emit("resetSelectForm");
      //   return 0
      // }
      const pd = {
        monitor: this.monitor,
        mobile: this.mobile,
        s_time: this.formatTime(this.startTime),
        e_time: this.formatTime(this.endTime),
      }
      this.$emit("selectChange", pd);
    },

    /**
     * 时间范围查询条件
     */
    timeRangeChange: function (index) {
      if (this.startTime === undefined || this.endTime === undefined) {
        return 0
      }
      let s_obj = new Date(this.startTime);
      let e_obj = new Date(this.endTime);
      if (s_obj.getTime() > e_obj.getTime() && this.endTime !== undefined && this.endTime !== null) {
        this.$message("开始时间必须早于结束时间!");
        switch (index) {
          case 1:
            this.startTime = undefined;
            break;
          case 2:
            this.endTime = undefined;
            break;
          default:
            break;
        }
        return 0
      }
      // const pd = {
      //   category: this.category === 0 ? undefined : this.category,
      //   mobile: this.mobile === 0 ? undefined : this.mobile,
      //   freq: this.freq === "" ? undefined : this.freq,
      //   's_time': s_time,
      //   'e_time': e_time,
      // }
      // this.$emit("selectChange", pd);
    },

    /**
     * 格式化时间
     * @param time
     * @returns {string|undefined}
     */
    formatTime(time) {
      if (time === undefined || time === null) {
        return undefined
      }
      let date = new Date(time)
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
    }
  },
}
</script>

<style>

.el-form {
  text-align: left;
}

.el-form-item {
  margin-left: 1.5vw;
}
</style>